<template>
  <div class="drawerBox" v-show="drawerBoxVisible" @click="propShow">
    <div
      v-if="!drawerVisible"
      class="drawerBtn"
      @click.stop.prevent="drawerShow"
    >
      <i class="el-icon-star-on"></i>
    </div>
    <div
      v-else-if="drawerVisible"
      class="drawer"
      :style="drawerStyle"
      @click.stop.prevent="drawerShow"
    >
      <div class="drawer_cont">
        <div class="title">
          <h2>{{ title }}</h2>
        </div>
        <div class="content">
          <table id="headTab">
            <thead>
              <tr>
                <th>类型</th>
                <th>描述</th>
                <th>详情</th>
              </tr>
            </thead>
          </table>
          <template>
            <vue-seamless-scroll
              class="seamless-warp"
              :data="drawerData"
              :class-option="optionSingleHeightTime"
            >
              <table id="scrollTab">
                <tbody>
                  <tr v-for="(item, index) in drawerData" :key="index">
                    <td v-text="item.title"></td>
                    <td v-text="item.date"></td>
                    <td>
                      <el-button type="text" @click.stop.prevent="drawerBtnFunc"
                        >链接</el-button
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
            </vue-seamless-scroll>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { vueSeamlessScroll },
  data () {
    return {
      title: '问题列表',
      drawerVisible: true,
      drawerBoxVisible: false,
      timer: null,
      drawerData: []
    }
  },
  props: {
    // 宽度
    width: {
      type: String,
      default: '450px'
    },
    // 高度
    height: {
      type: String,
      default: '450px'
    },
    // 数据
    dataList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    dataList: function () {
      console.log(this.dataList)
    }
  },
  computed: {
    drawerStyle: function () {
      return {
        width: this.width,
        height: this.height
      }
    },
    optionSingleHeightTime () {
      return {
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.drawerData ? this.drawerData.length : 5, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true // 开启数据实时监控刷新dom
      }
    }
  },
  methods: {
    propShow () {
      this.drawerBoxVisible = !this.drawerBoxVisible
      const res = [
        {
          title: '无缝滚动第一行无缝滚动第一行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第二行无缝滚动第二行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第三行无缝滚动第三行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第四行无缝滚动第四行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第五行无缝滚动第五行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第六行无缝滚动第六行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第七行无缝滚动第七行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第八行无缝滚动第八行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第九行无缝滚动第九行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第十行无缝滚动第十行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第十一行无缝滚动第十一行',
          date: '2017-12-16'
        }
      ]
      this.drawerData = res
      if (this.drawerBoxVisible && this.drawerVisible) {
        this.cellAlignment()
      }
    },
    // 上下两个表格单元格宽度对齐
    cellAlignment () {
      this.$nextTick(() => {
        const headTds = document.querySelector('#headTab tr').cells
        const scrollTds = document.querySelector('#scrollTab tr').cells

        for (let i = 0; i < headTds.length; i++) {
          headTds[i].width = scrollTds[i].offsetWidth
        }
      })
    },
    drawerBtnFunc () {
      console.log(new Date())
    },
    // 抽屉显示
    drawerShow () {
      this.drawerVisible = !this.drawerVisible
    }
  },
  mounted () {
    // 上下单元格对齐
    // this.cellAlignment()
  }
}
</script>

<style lang="scss" scoped>
.drawer {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;

  .drawer_cont {
    .dataTableClass {
      width: 100%;
      height: 100%;
    }
  }
}

.title {
  padding: 5px 10px;

  h2 {
    display: block;
    letter-spacing: 2px;
    font-weight: 100;
    font-size: 18px;
    color: #cccccc;
    // line-height: 10px;
    margin: 0;
  }
}
.content {
  position: absolute;
  height: calc(100% - 50px);
  width: 100%;
  padding: 0 10px 10px;
  box-sizing: border-box;
  overflow: hidden;

  .seamless-warp {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
  }
}

table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
  color: #e6ffff;

  thead {
    background: rgba(2, 84, 151, 0.63);
    border: 1px solid rgba(30, 116, 190, 0.82);
    font-size: 15px;
    line-height: 25px;
  }
  tbody {
    background: rgba(117, 131, 131, 0.12);
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    a {
      text-decoration: none;
      color: #6ae5ea;
    }
    tr:nth-child(2n) {
      background: rgba(2, 84, 151, 0.4);
    }
  }
  td {
    padding: 0 10px;
  }
}

.drawerBox {
  position: absolute;
  top: 10px;
  right: 560px;
  background: url("../../Static/assets/images/bg.png") no-repeat center center;
  z-index: 9;
  font-size: 14px;

  .drawerBtn {
    position: absolute;
    width: 45px;
    height: 45px;
    right: 0;
    background: url("../../Static/assets/images/bg.png") no-repeat center center;

    i {
      font-size: 45px;
    }
  }
}
</style>
